<template>
  <div v-if="!agent">
    <el-link type="primary" style="margin-left: 3px;" size="small"
             v-if="state==='exited' || state==='created'" @click.top="start">
      启动
    </el-link>
    <el-popconfirm title="确定停止吗？"
                   confirm-button-text='好的'
                   cancel-button-text='不'
                   @confirm="stop" v-if="state==='running' || state==='restarting'">
      <el-link slot="reference" type="danger" style="margin-left: 3px;" size="small">
        停止
      </el-link>
    </el-popconfirm>
    <el-popconfirm title="确定重启吗？"
                   confirm-button-text='好的'
                   cancel-button-text='不'
                   @confirm="restart" v-if="state==='running'">
      <el-link slot="reference" type="warning" style="margin-left: 3px;" size="small">
        重启
      </el-link>
    </el-popconfirm>
    <el-popconfirm title="确定暂停吗？"
                   confirm-button-text='好的'
                   cancel-button-text='不'
                   @confirm="pause" v-if="state==='running'">
      <el-link slot="reference" type="warning" style="margin-left: 3px;" size="small">
        暂停
      </el-link>
    </el-popconfirm>
    <el-link type="primary" style="margin-left: 3px;" size="small"
             v-if="state==='paused'" @click.top="resume">
      恢复
    </el-link>
    <el-popconfirm title="确定删除吗？"
                   confirm-button-text='好的'
                   cancel-button-text='不'
                   v-if="state==='exited' || state==='created'" @confirm="remove">
      <el-link slot="reference" type="danger" style="margin-left: 3px;" size="small">
        删除
      </el-link>
    </el-popconfirm>
  </div>
</template>

<script>
import Api from "@/api/index";
import pubsub from 'pubsub-js'

export default {
  name: "Button",
  props: {
    clientId: {
      type: String,
      required: true
    },
    containerId: {
      type: String,
      required: true
    },
    state: {
      type: String,
      required: true
    },
    agent: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    start() {
      Api.asyncMqttRequest(this.clientId, (taskId) => Api.dockerClient.containersStart({
        id: this.clientId,
        containerId: this.containerId,
        callId: taskId
      })).then(data => this.success(data, 'start'))
        .catch(data => this.fail(data, 'start'))
    },
    stop() {
      Api.asyncMqttRequest(this.clientId, (taskId) => Api.dockerClient.containersStop({
        id: this.clientId,
        containerId: this.containerId,
        callId: taskId
      })).then(data => this.success(data, 'stop'))
        .catch(data => this.fail(data, 'stop'))
    },
    restart() {
      Api.asyncMqttRequest(this.clientId, (taskId) => Api.dockerClient.containersRestart({
        id: this.clientId,
        containerId: this.containerId,
        callId: taskId
      })).then(data => this.success(data, 'restart'))
        .catch(data => this.fail(data, 'restart'))
    },
    pause() {
      Api.asyncMqttRequest(this.clientId, (taskId) => Api.dockerClient.containersPause({
        id: this.clientId,
        containerId: this.containerId,
        callId: taskId
      })).then(data => this.success(data, 'pause'))
        .catch(data => this.fail(data, 'pause'))
    },
    resume() {
      Api.asyncMqttRequest(this.clientId, (taskId) => Api.dockerClient.containersResume({
        id: this.clientId,
        containerId: this.containerId,
        callId: taskId
      })).then(data => this.success(data, 'resume'))
        .catch(data => this.fail(data, 'resume'))
    },
    remove() {
      Api.asyncMqttRequest(this.clientId, (taskId) => Api.dockerClient.containersRemove({
        id: this.clientId,
        containerId: this.containerId,
        callId: taskId
      })).then(data => this.success(data, 'remove'))
        .catch(data => this.fail(data, 'remove'))
    },
    success(data, action) {
      switch (action) {
        case 'start':
          pubsub.publish('dialog', {title: '提示', message: '启动成功'})
          break
        case 'stop':
          pubsub.publish('dialog', {title: '提示', message: '停止成功'})
          break
        case 'restart':
          pubsub.publish('dialog', {title: '提示', message: '重启成功'})
          break
        case 'pause':
          pubsub.publish('dialog', {title: '提示', message: '暂停成功'})
          break
        case 'resume':
          pubsub.publish('dialog', {title: '提示', message: '恢复成功'})
          break
        case 'remove':
          pubsub.publish('dialog', {title: '提示', message: '删除成功'})
          break
      }
      this.$emit("success", data)
    },
    fail(data, action) {
      this.$emit("fail", data)
    }
  }
}
</script>

<style scoped>

</style>
